<template>
  <div class="editCard">
    <el-dialog v-model="dialogFormVisible" title="修改信息">
      <el-form
        ref="ruleFormRef"
        :model="data"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="租赁标题" prop="lease_title">
          <el-input v-model="data.lease_title" />
        </el-form-item>
        <el-form-item label="租赁介绍" prop="lease_introduce">
          <el-input v-model="data.lease_introduce" autosize type="textarea" />
        </el-form-item>
        <el-form-item label="价格" prop="lease_price">
          <el-input v-model="data.lease_price" autosize />
        </el-form-item>
        <el-form-item label="联系人" prop="lease_contacts">
          <el-input v-model="data.lease_contacts" />
        </el-form-item>
        <el-form-item label="联系电话" prop="lease_tel">
          <el-input v-model="data.lease_tel" />
        </el-form-item>
        <el-form-item label="关键词" prop="lease_keyword">
          <el-tag
            v-for="tag in data.lease_keyword"
            :key="tag"
            class="mx-1"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="InputRef"
            v-model="inputValue"
            class="ml-1 w-20"
            size="small"
            @keyup.enter="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button
            v-else
            class="button-new-tag ml-1"
            size="small"
            @click="showInput"
          >
            + 添加
          </el-button>
        </el-form-item>
        <el-form-item label="显示层级" prop="lease_index">
          <el-input-number v-model="data.lease_index" :min="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="back">返回</el-button>
          <el-button type="primary" @click="submit(ruleFormRef)">
            提交</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { ref, watch, reactive, nextTick, toRaw } from "vue";
import { mainStore } from "../store/index";
import { useRouter } from "vue-router";
import request from "../axios/index";
import { ElMessage, ElMessageBox, FormRules } from "element-plus";
import type { ElInput } from "element-plus";

export default {
  name: "EditForm",
  setup(props, { emit }) {
    const store = mainStore();
    const data: any = reactive(toRaw(store.cacheData));
    console.log(data);
    //标签关键词
    const inputValue = ref("");
    const dynamicTags = ref(data.lease_keyword);
    const inputVisible = ref(false);
    const InputRef = ref<InstanceType<typeof ElInput>>();
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
    };
    const showInput = () => {
      inputVisible.value = true;
      nextTick(() => {
        InputRef.value!.input!.focus();
      });
    };
    const handleInputConfirm = () => {
      if (inputValue.value) {
        dynamicTags.value.push(inputValue.value);
        data.lease_keyword = dynamicTags.value;
      }
      inputVisible.value = false;
      inputValue.value = "";
    };
    //定义表单规则
    const rules = reactive<FormRules>({
      noticeTitle: [
        {
          required: true,
          message: "请输入标题",
          trigger: "blur",
        },
      ],
      noticeDescribe: [
        {
          required: true,
          message: "请输入内容描述",
          trigger: "blur",
        },
      ],
    });

    const router = useRouter();

    const dialogFormVisible = ref(true);
    //返回上一级
    function back() {
      emit("reFresh", null);
      router.back();
    }
    //提交
    const submit = () => {
      ElMessageBox.confirm("是否确认提交信息")
        .then(() => {
          request
            .post("/admin/lease/changeInfo", {
              leaseId: data.id,
              leaseTitle: data.lease_title,
              leaseIntroduce: data.lease_introduce,
              leasePrice: data.lease_price,
              leaseContacts: data.lease_contacts,
              leaseTel: data.lease_tel,
              leaseKeyword: data.lease_keyword.join(","),
              leaseIndex: data.lease_index,
            })
            .then((res) => {
              if (res.data.code === 200) {
                ElMessage({
                  message: res.data.message,
                  type: "success",
                });
                emit("reFresh", null);
                back();
              } else {
                ElMessage({
                  message: res.data.message,
                  type: "error",
                });
                back();
              }
            });
        })
        .catch((err) => {
          ElMessage("已取消修改信息");
        });
    };

    watch(
      () => dialogFormVisible.value,
      (newValue, oldValue) => {
        if (!newValue) {
          back();
        }
      }
    );

    return {
      data,
      dialogFormVisible,
      rules,
      back,
      submit,
      handleClose,
      showInput,
      handleInputConfirm,
      inputValue,
      inputVisible,
    };
  },
};
</script>

<style scoped>
.editCard {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #fff;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}

.el-dialog__body {
  padding-top: -10px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
}
</style>